<template>
  <div class="detail">
    <detail-header></detail-header>
    <detail-synopsis :jobMsg="jobMsg"></detail-synopsis>
    <detail-describe :jobMsg="jobMsg"></detail-describe>
    <detail-company :jobMsg="jobMsg"></detail-company>



  </div>
</template>

<script>
import axios from "axios";
import { mapState } from 'vuex'

import DetailHeader from "./components/Header";
import DetailSynopsis from "./components/Synopsis";
import DetailDescribe from "./components/Describe";
import DetailCompany from "./components/Company";



export default {
  name: "Detail",
  components: {
    DetailHeader,
    DetailSynopsis,
    DetailDescribe,
    DetailCompany
  },
  data() {
    return {
      jobMsg: {}
    };
  },
  computed: {
    ...mapState({
      jobs_id: "jobs_id"
    })
  },
  methods: {
    getDetailInfo() {
      axios.get("/api/detail.json?jobs_id=" + this.jobs_id).then(this.handleGetDetailInfoSucc);
    },
    handleGetDetailInfoSucc(res) {
      // console.log(res)
      if (res.status == 200 && res.data) {

        res.data.jobList.forEach(element => {
          if(element.jobs_id == this.jobs_id){
            this.jobMsg = element;
          }
        });

        // this.jobMsg = res.data

      }
    }
  },
  activated() {
    this.getDetailInfo();
  }
};
</script>

<style>
.detail{
  background: #eeeeee;
}
</style>